<template>
  <div class="coveragePage">
    <div class="coveragePage-head"><img src="../../assets/img/gisHouseAnalysAlert/coverage.png" alt="" /> 热力图</div>
    <div class="coveragePage-item" :class="coveragePage_index == 1 ? 'item-style' : 'item-styles'" @click="pickCoveragePage(1)">项目数量</div>
    <div class="coveragePage-item" :class="coveragePage_index == 2 ? 'item-style' : 'item-styles'" @click="pickCoveragePage(2)">房量均价</div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import busEmitter from "@/utils/bus";
const coveragePage_index = ref(1);
const pickCoveragePage = (val) => {
  coveragePage_index.value = val;
  busEmitter.emit("coverageFun", val);
};
</script>
<style scoped lang="less">
.coveragePage {
  position: fixed;
  top: 100px;
  right: 40px;
  background: rgba(8, 50, 62, 0.8);
  border: 1px solid #67c2d0;
  width: 230px;
  z-index: 99;
  .coveragePage-head {
    font-weight: 400;
    font-size: 28px;
    color: #ffffff;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 26px;
      height: 29px;
      margin-right: 20px;
      position: relative;
      top: 2px;
    }
  }
  .coveragePage-item {
    font-weight: 400;
    font-size: 24px;
    color: #cdd5db;
    width: 230px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #67c2d0;
  }
  .coveragePage-item:hover {
    cursor: pointer;
  }
  .item-style {
    background: linear-gradient(180deg, rgba(32, 134, 164, 0.2) 0%, #2086a4 100%);
    color: #ead77a;
  }
}
</style>
